<style>
</style>
<template>
  <el-tabs v-model="now_group_name" class="tabs" @tab-click="tab_click">
    <el-tab-pane :label="row.title" :name="row.name" v-for="row in group_map" lazy>
      <forms :ref="(el)=>{row.$form_ref=el;}" :config="row.form_param" @submit:forms="onsubmit($event, row)" :btns="row.form_btns"  >
      </forms>
      <config_group_loop v-if="row.children&&row.children.length" :group_map="row.children" :parent_id="row.id" @change_tab="$emit('change_tab',$event)" @change_value="$emit('change_value',$event)"></config_group_loop>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import {ElMessageBox} from "element-plus";
import {ajax} from "@/js/api_tool.js";
import s94Mjs from "s94-js";

export default {
  name: 'config_group_loop',
  props: {
    group_map: Array,
    parent_id: Number,
    modelValue: String,
  },
  emits: ['update:modelValue', 'change_tab', 'change_value'],
  data(){
    return {
      now_group_name: '',
      ref_map: {},
    }
  },
  methods: {
    change_mode(row, mode){
      let app = this;
      function to_edit(row){
        if (row.is_private != 1) return app.change_mode(row, 'edit');
        new Promise((resolve)=>{
          ElMessageBox.prompt('验证管理员密码', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
          }).then(({ value }) => {
            if (!value) return app.tips('密码错误');
            ajax({url:'/admin/api/check_password', data:{password:value}}, (res)=>{
              resolve();return false;
            })
          })
        }).then(()=>{ app.change_mode(row, 'edit'); })
      }
      switch (mode){
        case 'info':{
          row.form_btns = [
            {title:'组详情', type:'', onclick(){ app.to_edit(row);} },
            {title:'修改值', type:'warning', onclick(){ to_edit(row, 'edit');} },
          ];
          Object.values(row.form_param).forEach(p=>{
            p.is_info=true;
            p.value = p.value_info;
          });
        }break;
        case 'edit':{
          row.form_btns = [
            {title:'取消', type:'', onclick(){ app.change_mode(row, 'info');} },
            {title:'提交', type:'primary', onclick(){ app.form_submit(row);} }
          ]
          Object.values(row.form_param).forEach(p=>{
            p.is_info=false;
            p.value = p.value_raw;
          });
        }break;
      }
    },
    to_edit(row){
      let can_edit = in_right_admin('ConfigGroup/edit') && ~[0,row.tenant_id].indexOf(parseInt(_config('this_tenant.id')))
      let param = {
        id: row.id,
      }
      if (!can_edit) param['is_info'] = 1;
      this.iframe('/config_group/edit?'+s94Mjs.param_encode(param))
    },
    form_submit(row){
      let data = new FormData(row.$form_ref.$el);
      ajax({url:'/admin/config_group/edit_value?group='+encodeURIComponent(row.full_name), data:data, method:'POST'}, (res)=>{
        if (res.data>0) this.$emit('change_value', data);
        this.change_mode(row, 'info');
      })
    },
    tab_click(tab){
      let row = this.group_map[tab.index];
      if (!row) return;
      this.group_map.forEach(v=>{v.on=0;})
      row.on=1;
      this.get_group_map(row);
    },
    get_group_map(row){
      if (row.children) return this.$emit('change_tab', row);
      let data = {parent_id: row.id}
      ajax({url:'/admin/config_group/config_map', data:data}, (res)=>{
        row.children = res.data['group_map'];
        this.$emit('change_tab', row);
        return false;
      })
    },
    init_now_group_name(){
      let now_group_name = '';
      Object.values(this.group_map).some((row,i)=>{
        if (i===0) now_group_name = row.name;
        if (row.on === 1) {
          now_group_name = row.name;
          return true;
        }
      })
      this.now_group_name = now_group_name;
      return now_group_name;
    },
    init_group_mode(){
      Object.values(this.group_map).forEach(row=>{
        this.change_mode(row, 'info');
      })
    }
  },
  watch:{
    group_map(){
      this.init_now_group_name();
      this.init_group_mode();
    },
  },
  mounted() {
    let app = this;
    this.init_now_group_name();
    this.init_group_mode();

  }
}
</script>
